<template>
  <div class="wrap">
    <div class="top">
      <img src="../../../static/img/login111.png" alt="">
    </div>
    <div class="inp">
      <div class="uname">
        <img src="../../../static/img/login112.png" alt="">
        <input type="text" placeholder="请输入您的手机号码" v-model="uname">
      </div>
      <!--     密码登录   -->
      <div class="pword">
        <img src="../../../static/img/login113.png" alt="">
        <input :type="isLook?'text':'password'" placeholder="请设置登录密码" v-model="pword">
        <p><img v-show="pword.length>=1" :src="isLook?'../../../static/img/look1.png':'../../../static/img/look2.png'" alt="" class="lookPword" @click="isLook=!isLook"></p>
      </div>
      <!--     验证码登录   -->
      <div class="yzmLogin">
        <img src="../../../static/img/login113.png" alt="">
        <input type="text" placeholder="验证码" v-model="code">
        <p class="hqyzm" @click="obtain">{{time}}</p>
      </div>
      <div class="btn" @click="register">立即注册</div>
      <div class="msg" @click="jump('login')">已有账号？去登录</div>
    </div>
    <div class="footer"><img src="../../../static/img/login114.png" alt=""></div>
  </div>
</template>

<script>

  export default {
    name: "register",
    data(){
      return {
        isLook:false, // 密码是否明文
        uname:'',
        pword:'',
        time:'获取验证码', //验证码倒计时
        show:false,
        code:'', // 验证码
      }
    },
    mounted() {
      window.addEventListener('beforeunload',e=>{
        var event = e || window.e;
        event.preventDefault?e.preventDefault():e.returnValue = false;
        localStorage.setItem('VerificationCodeTime',this.time)
      })
    },
    methods:{
      jump(page){
        this.$router.push({
          name:page
        })
      },
      obtain(){
        if (typeof (this.time) == "number"){
          return;
        }else if (!/^1[3-9][0-9]{9}$/.test(this.uname)) {
          this.$myNotice('手机号码有误',1500);
          return;
        }
        var time = localStorage.getItem('VerificationCodeTime');
        time = time.length>=2?time:time*1;
        if (time && typeof (time) == 'number') {
          this.time = time;
        }else {
          this.time = 60;
        }
        // 获取验证码
        this.$myAxios('index/Sms/send', 'post', {
          tel: this.uname,
          name:'注册验证'
        }).then(res => {
          this.token = res.data.token;
          console.log(res.data)
        });
        var timer = setInterval(()=>{
          this.time-=1;
          if (this.time<=0) {
            clearInterval(timer);
            this.time = '重新获取';
            localStorage.setItem('VerificationCodeTime','获取验证码')
          }
        },1000)
      },
      register(){
        var resPword = /^(?![0-9]+$)(?!\.+$)(?![a-zA-Z]+$)[\.0-9A-Za-z]{8,16}$/;
        var resUname = /^1[3-9][0-9]{9}$/;
        // 验证不能只有数字加小数点
        var resNum = /^[0-9\.]{8,16}$/;
        if (resUname.test(this.uname) && resPword.test(this.pword) && !resNum.test(this.pword)) {
          console.log('可以注册');
          // 短信验证码注册
          this.$myAxios('index/Sms/verify', 'post', {
            code: this.code,
            token: this.token,
            name:'',
            mobile:''
          }).then(res => {
            console.log(res.data);
            switch (res.data.state) {
              case 1:
                // 注册成功
                this.$myAxios('index/login/register', 'post', {
                  mobile: this.uname,
                  password:this.pword
                }).then(res => {
                  console.log(res.data);
                  if (res.data.state) {
                    this.$myNotice('注册成功~',1500);
                    this.$router.push({
                      name:'login'
                    })
                  }else {
                    this.$myNotice('手机号已注册~',1500);
                  }
                });
                break;
              case 10001:
                // 验证码
                this.$myNotice('验证码不对喔~', 1500);
                break;
              case 10000:
                // 验证码
                this.$myNotice('验证码已失效~', 1500);
                break;
            }
          });
        }else {
          this.$myNotice('请输入8~16位数字字母组合密码~')
        }
      }
    }
  }
</script>

<style scoped>
  .wrap {
    padding-top: .4rem;
  }
  .top {
    width: 100%;
    height: 3rem;
  }
  .top>img {
    width: 100%;
    max-height: 3rem;
  }
  .uname,.pword,.yzmLogin {
    width: 85%;
    height: .2rem;
    /*box-sizing: border-box;*/
    border-bottom: .01rem solid #E5E5E5;
    margin: .15rem auto;
    padding: .1rem 0;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .yzmLogin {
    padding-bottom: .15rem;
  }
  .uname {
    margin-top: 0;
  }
  .pword {
    margin-bottom: .2rem;
    position: relative;
  }
  .pword>p {
    width: .2rem;
    height: .2rem;
    position: absolute;
    right: 0;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
  }
  .uname>img,.pword>img:nth-child(1),.yzmLogin>img {
    width: .14rem;
    height: .17rem;
    margin-right: .12rem;
  }
  .uname>input,.pword>input,.yzmLogin>input {
    width: 2.1rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    outline: none;
    border: none;
  }
  .msg {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    text-decoration:underline;
    color:rgba(102,102,102,1);
    text-align: center;
  }
  .hqyzm {
    width:1.05rem;
    height:.4rem;
    background:rgba(247,177,23,1);
    /*border:.01rem solid rgba(232,155,1,1);*/
    border-radius:.2rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    text-align: center;
    line-height: .4rem;
    color: #FFFFFF;
  }
  .btn {
    width:3.15rem;
    height:.45rem;
    background:linear-gradient(0deg,rgba(253,192,58,1) 0%,rgba(252,173,14,1) 100%);
    border-radius:.23rem;
    margin: .2rem auto;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FFFFFF;
    text-align: center;
    line-height: .45rem;
  }

  .footer {
    width: 100%;
    margin: .3rem auto 0;
    text-align: center;
  }
  .footer>img {
    width: .76rem;
    height: .28rem;
  }
  .lookPword {
    width: .14rem;
  }

</style>
